<template>
  <div class="filter">
    <div class="filter-header">
      <a :class="['filter-nav', { 'filter-nav--active': index == activeIndex }]"
        v-for="(nav, index) in navList" :key="index"
        @click="toggleActiveIndex(index)">
        {{nav}}
        <icon id="down"></icon>
      </a>
    </div>
    <transition-group name="filter-menu">
      <ul class="filter-menu"
        v-for="(item, i) in items" :key="i"
        v-show="i === activeIndex">
        <li :class="['filter-menu-item', { 'filter-menu-item--active': selectedIndexList[i] == j }]"
          v-for="(item, j) in item.menuList" :key="j"
          @click="select(j)">{{item.name}}</li>
      </ul>
    </transition-group>

    <transition name="filter-backdrop">
      <div v-show="actived" class="filter-backdrop" @click="close"></div>
    </transition>
  </div>
</template>

<script>
import { array } from '@/common/extend'

/**
 * @prop {Array} items
 * [
 *  { menuList: [{
 *      name: '',
 *      value,
 *      title: 'title of nav, use name for default, optional'
 *    }], defaultMenuIndex: 0 }
 * ]
 * @prop {Function} action
 * function ([menuValue, ...])
 */
export default {
  props: ['items'],
  data () {
    return {
      activeIndex: -1,
      selectedIndexList: this.items.map((item) => {
        return item.defaultMenuIndex || 0
      })
    }
  },
  computed: {
    actived () {
      return this.activeIndex >= 0
    },
    selectedValueList () {
      return this.items.map((item, index) => {
        let seletedIndex = this.selectedIndexList[index]
        return item.menuList[seletedIndex].value || seletedIndex
      })
    },
    navList () {
      return this.items.map((item, index) => {
        let menu = item.menuList[this.selectedIndexList[index]]
        return menu.title || menu.name
      })
    }
  },
  methods: {
    toggleActiveIndex (i) {
      if (i === this.activeIndex) {
        return this.close()
      }

      this.activeIndex = i
    },
    close () {
      this.activeIndex = -1
    },
    select (i) {
      this.selectedIndexList =
        array.replaceAt(this.selectedIndexList, this.activeIndex, i)

      this.$emit('action', this.selectedValueList)
      this.close()
    }
  }
}
</script>

<style lang="scss">
$color-border: #E1E1EA;
$color-active: #C9B267;

.filter {
  position: relative;
  font-size: 14px;
  line-height: 1;

  &-header {
    display: flex;
    border: solid $color-border;
    border-width: 1px 0;
    background-color: $bg;
  }

  &-nav {
    display: block;
    flex: 1;
    padding: 15px 0;
    text-align: center;
    color: #333;

    &:not(:first-child) {
      border-left: 1px solid $color-border;
    }

    > .icon {
      transition: transform .2s;
    }

    &--active > .icon {
      transform: rotateZ(180deg);
    }
  }

  &-menu {
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
    background-color: $bg;

    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    max-height: 500px;
    overflow: hidden;
    transition: max-height .3s;

    &-item {
      padding: 15px 0;
      color: #666;
      position: relative;

      &--active {
        color: $color-active;

        &::after {
          content: '';
          display: block;
          height: 1em;
          width: .5em;
          border: solid;
          border-width: 0 2px 2px 0;

          position: absolute;
          right: 1em;
          top: 1em;
          transform: rotateZ(30deg);
        }
      }
    }
    &-item:not(:last-child) {
      border-bottom: 1px solid $color-border;
    }

    &-enter,
    &-leave-active {
      max-height: 0;
    }

    &-enter-active {
      z-index: 3;
    }
  }

  &-backdrop {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1000px;
    background: rgba(0,0,0,.3);
    z-index: 1;
    transition: opacity .3s;

    &-enter, &-leave-active {
      opacity: 0;
    }
  }
}
</style>
